Applying icons 應用圖示
Icon & Material Symbol styles 圖示的樣式
有三種樣式可供選擇:輪廓式、圓角式和尖角式
Outlined style 輪廓樣式
帶輪廓的符號採用描邊和填充設計,呈現輕盈簡潔的風格,適合密集介面。描邊粗細可調整,可與排版字型相配。




Rounded and sharp styles 圓潤和尖銳的風格
圓形符號適用於重字型、弧形標誌或圓形元素的品牌。尖銳符號用直邊展示拐角,在小尺寸下保持清晰,適合無法用圓形表達的品牌風格。




Customizing Symbols 自定義符號
圖示有四個可調節的樣式可變字型屬性,稱為軸axes。軸是一個印刷術語,指的是符號的一種屬性,可透過改變該屬性來創造視覺上的變化。
1 Weight
“重量”定義了符號的筆畫粗細,其權重範圍在細(100)到粗(700)之間。權重也會影響符號的整體大小。

2Fill 填充
填充功能讓你能夠從一種更具輪廓感的風格轉變為反轉風格或更飽滿的填充風格。填充屬性可用於傳達過渡狀態,如未填充和已填充狀態。其值範圍從 0 到 1,其中 1 表示完全填充。填充屬性與線寬一樣,是影響符號整體外觀的主要屬性。


3 Grade 等級
灰度是一種更精細的粗細調整方式,對符號大小影響較小。文字和符號的灰度等級可以匹配以獲得和諧效果,比如都使用 -25 的值。

等級可以調整視覺滲色,使圖示在不同背景上看起來大小一致。淺色背景上深色圖示預設為0,深色背景上淺色圖示預設為-25。


要使筆畫更粗且更突出,可使用正值等級,比如在表現選中圖示狀態時。

4 Optical sizes 光學字號
光學尺寸範圍從 20dp 到 48dp。
為了使影象在不同尺寸下看起來相同,筆畫粗細(厚度)會隨著圖示尺寸的縮放而變化。光學尺寸提供了一種在增大或減小符號尺寸時自動調整筆畫粗細的方法。

傳統上,圖示是從 24dp 的源向量進行縮放的,這導致放大後的圖示與原始圖示相比過於臃腫。透過視覺尺寸軸,在圖示尺寸增大時,你可以保持筆畫粗細(厚度)不變。


Using Material Symbols with typography 將材質符號與排版配合使用
材質符號的設計考慮因素與字型類似,並且經常與文字一同出現。選擇合適的圖示集可以將介面內容緊密聯絡起來,增強產品的品牌凝聚力。

Accessibility 無障礙
當符號較為抽象時,標籤文字可提供簡短且有意義的描述。這在導航情境中可能會很有幫助。
Icons with a label text帶有標籤文字的圖示


Small icons 小圖示
圖示在放大或縮小尺寸時不會失真。簡單的符號,比如用於評級的星星,只要能保持可識別性,就可以以任何尺寸單獨使用。
其他圖示應在其下方配有不超過 20dp(裝置獨立畫素)的文字標籤,以確保其含義清晰並保持可訪問性。這些符號包括:
- 複雜的圖示,即那些細節豐富或由多個部分組成的圖示
- 帶有關鍵操作的圖示,這些圖示對於使用該產品至關重要
Target size 目標尺寸
圖示周圍應留有足夠的空間,以確保其清晰可讀且便於互動。
預設情況下,24dp 的符號目標大小應為 48dp。

Localizing icons 本地化圖示
為確保圖示在當地市場能有效傳達含義,需在不同年齡群體、不同文化及不同語言環境下對其進行測試,並遵循以下最佳實踐方法:
- 抽象圖示需配備標籤文字
- 導航項需要清晰易懂的標籤
- 注意使用者的技術熟練度:頻繁和較少使用網際網路的使用者對圖示的理解可能不同

Cultural influence of colors and symbols 顏色和符號的文化影響
顏色和符號在不同文化中有不同含義。例如,白色在西方代表純潔,在東方則象徵哀悼;貓頭鷹在西方象徵智慧,在東方則被視為不祥。創作時需注意這些文化差異。












